<template>
  <header
    class="app-header"
    :class="{
      'white-bg': isWhiteHeader,
      'transparent-bg': !isWhiteHeader,
      'with-line': withLine
    }"
  >
    <div class="left-section">
      <div class="back-btn" :class="buttonClass" @click="goBack">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M15 18l-6-6 6-6" />
        </svg>
      </div>
    </div>
    <h1 v-if="isWhiteHeader" class="title">{{ title }}</h1>
    <div class="right-section"></div>
  </header>
  <div style="height: 100rpx" v-if="isPlaceholder"></div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: Number,
    default: 1 //1默认白色，2透明无标题，滚动后白底带标题
  },
  //是否需要底部的灰线
  withLine: {
    type: Boolean,
    default: false
  },
  //是否占位，配置后内容直接从组件下发开始，否则内容从页面最上方开始
  isPlaceholder: {
    type: Boolean,
    default: false
  }
})

const isWhiteHeader = computed(() => props.type == 1)

const buttonClass = computed(() => {
  return props.type == 2 && !isWhiteHeader.value ? 'text-white' : 'text-gray'
})

const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
}
</script>

<style lang="scss" scoped>
.app-header {
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;

  &.white-bg {
    background: #fff;
  }

  &.transparent-bg {
    background: transparent;
  }

  .left-section {
    width: 96rpx;

    .back-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      &.text-white {
        color: #fff;
      }

      &.text-gray {
        color: #374151;
      }
    }
  }

  .title {
    font-size: 36rpx;
    font-weight: 700;
    flex: 1;
    text-align: center;
    margin: 0;
    color: #111827;
  }

  .right-section {
    width: 96rpx;
  }

  &.with-line {
    border-bottom: 1rpx solid #e5e5e5;
  }
}
</style>
